<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
    <script>
        let container = document.getElementById('root');
        class Component {
            state = { number: 0 }
            componentWillMount() {
                console.log('componentWillMount');
            }

            componentDidMount() {
                console.log('componentDidMount');
            }
            shouldComponentUpdate() {
                console.log('shouldComponentUpdate');
                return true;
            }
            componentWillUpdate() {
                console.log('componentWillUpdate');
            }

            componentDidUpdate() {
                console.log('componentDidUpdate');
            }
            setState(newState) {
                this.state = { ...this.state, ...newState }
                if (!this.shouldComponentUpdate || (this.shouldComponentUpdate && this.shouldComponentUpdate())) {
                    if (this.componentWillUpdate)
                        this.componentWillUpdate();
                    let content = this.render();
                    container.innerHTML = content;
                    if (this.componentDidUpdate)
                        this.componentDidUpdate();
                }
            }
            render() {
                console.log('render');
                return this.state.number;
            }
        }
        render(Component, document.getElementById('root'));
        function render(Component, container) {

            let component = new Component();
            if (component.componentWillMount)
                component.componentWillMount();
            let content = component.render();
            container.innerHTML = content;
            if (component.componentDidMount)
                component.componentDidMount();

            setTimeout(() => {
                component.setState({ number: 1 });
            }, 3000);
        }

    </script>
</body>

</html>